<template>
    <div class="yuncun">
        <div class="top">
            <div class="box1">云村有票</div>
        </div>
        <div class="content">
            <!-- 轮播图区域 -->
        <van-swipe :autoplay="3000" lazy-render>
            <van-swipe-item v-for="image in images" :key="image">
                <img :src="image" width="100%" height="200px" />
            </van-swipe-item>
        </van-swipe>
        </div>
        <div class="bottom">
            <div class="box2">热门演出</div>
            <div class="bottom1">
                <div v-for="item in proformData" :key="item.id" @click="musicProform(item.id)">
                    <img :src="item.imgUrl" alt="" width="30%" height="80px">
                    <div class="text">{{ item.text }}</div>
                </div>
            </div>
        </div> 
    </div>
</template>
<script setup>
import { ref } from 'vue'
import router from '@/router';

// 轮播图静态数据
const images = [
    'https://img1.baidu.com/it/u=1072777646,3894869223&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=422',
    'https://img2.baidu.com/it/u=3342631664,1299888415&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=210',
    'https://img1.baidu.com/it/u=1622197277,3413467889&fm=253&fmt=auto&app=138&f=JPEG?w=658&h=298'
];

const proformData = ref([
    { id: 1, text: "文艺演出" ,imgUrl:'https://img1.baidu.com/it/u=3520962471,1009118376&fm=253&fmt=auto&app=138&f=JPEG?w=499&h=194'},
    { id: 2, text: "京剧专场演出" ,imgUrl:'https://img2.baidu.com/it/u=3430134650,1725250932&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500' },
    { id: 3, text: "音乐剧" ,imgUrl:'https://img1.baidu.com/it/u=3255188329,57845721&fm=253&fmt=auto&app=138&f=JPEG?w=280&h=373' },
])

//跳转到详情页
const musicProform = (id) => {
    console.log('跳转到门票详情页', id);
}
</script>
<style scoped>
.yuncun{
    height: calc(100vh - 110px);
    overflow-y: scroll;
}
.top{
    background-color: lightcyan;
    border-radius: 10px;

}
.box1{
    color: #000;
    font-size: 20px;
    font-weight: 600;
    padding: 20px;
}
.bottom{
    padding-top: 20px;
}
.box2{
    color: #000;
    font-size: 20px;
    font-weight: 600;
}
.bottom1{
    padding: 10px;
}
.text{
    position: relative;
    top: -50px;
    left: 120px;
    font-size: 15px;
    font-weight: bold;
}
</style>